<template>
    <el-form ref="menuFormRef" :rules="rules" :model="menuForm" label-width="100px">
        <!-- 菜单名称 -->
        <el-form-item :label="modular === 'master' ? '主菜单名称' : '子菜单名称'" prop="name">
            <el-input v-model="menuForm.name" placeholder="请填写菜单名称"/>
        </el-form-item>

        <!-- 菜单类型 -->
        <el-form-item label="主菜单类型" prop="menuType" v-if="modular === 'master'">
            <el-radio-group v-model="menuForm.menuType" @change="chanmenutype($event)">
                <el-radio :label="false">不配置子菜单</el-radio>
                <el-radio :label="true">配置子菜单</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="menuForm.menuType && modular === 'master'">
            <slot></slot>
        </el-form-item>

        <template v-if="!menuForm.menuType">
            <!-- 跳转链接 -->
            <el-form-item label="菜单动作" prop="visitType">
                <el-radio-group v-model="menuForm.visitType">
                    <el-radio label="click">发送消息</el-radio>
                    <el-radio label="view">网页</el-radio>
                    <el-radio label="miniprogram">小程序</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- 网址 -->
            <el-form-item label="网址" prop="url" v-if="menuForm.visitType == 'view'">
                <el-input v-model="menuForm.url" placeholder="请填写网址"/>
            </el-form-item>
            <!-- 小程序 -->
            <template v-if="menuForm.visitType == 'miniprogram'">
                <!-- AppId -->
                <el-form-item label="AppId" prop="appId">
                    <el-input v-model="menuForm.appId" placeholder="请确保公众号与小程序已绑定"/>
                </el-form-item>

                <!-- 路径 -->
                <el-form-item label="页面路径" prop="pagePath">
                    <el-input v-model="menuForm.pagePath"   placeholder="请填写跳转页面的小程序访问路径"/>
                </el-form-item>
                <!-- 地址 -->
                <el-form-item label="URL" prop="url">
                    <el-input v-model="menuForm.url"   placeholder="无法打开小程序时跳转的页面"/>
                </el-form-item>
            </template>
            <!-- 发送消息 -->
            <template v-if="menuForm.visitType == 'click'">
                <el-form-item label="类型" prop="file_type" >
                    <el-radio-group v-model="menuForm.file_type">
                        <el-radio label="IMAGE_REPLY">图片</el-radio>
                        <el-radio label="VIDEO_REPLY">视频</el-radio>
                        <el-radio label="TEXT_REPLY">关键词</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="图片" prop="image_url" v-if="menuForm.file_type  == 'IMAGE_REPLY'">
                    <material-picker v-model="menuForm.image_url" :limit="1" @change="getmedid($event,'image')"/>
                </el-form-item>
                <el-form-item label="视频" prop="video_url" v-if="menuForm.file_type  == 'VIDEO_REPLY'">
                    <material-picker v-model="menuForm.video_url" type="video" :limit="1" @change="getmedid($event,'video')" />
                </el-form-item>
                <el-form-item label="关键词" prop="keyword_name" v-if="menuForm.file_type  == 'TEXT_REPLY'">
                    <el-input v-model="menuForm.keyword_name" placeholder="请选择关键词">
                        <template #suffix>
                            <div style="margin-left:10px;cursor:pointer;color:blue;" @click="openkeyword">选择关键词</div>
                        </template>
                    </el-input>
                </el-form-item>
            </template>
        </template>
        <el-dialog
            v-model="dialogVisible"
            title="选择关键词"
            width="50%"
        >
            <div>
                <el-table size="large"  :data="pager.lists" v-loading="pager.loading" style="width: 100%; margin-top: 30px;">
                    <el-table-column label="规则名称" prop="name" min-width="120" />
                    <el-table-column label="关键词" prop="keyword" min-width="120" />
                    <el-table-column label="匹配方式" min-width="120">
                        <template #default="{ row }">
                            {{ getMatchingType(row.matching_type) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="回复类型" min-width="120">
                        <template #default="{ row }">
                            {{ getContentType(row.content_type) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" prop="sort" min-width="120" />
                    <el-table-column label="操作" width="150" fixed="right">
                        <template #default="{ row }">
                            <el-button v-if="menuForm.keyword_id == row.id" type="primary" @click="Handler(row)">
                                    已选
                            </el-button>
                            <el-button v-else @click="Handler(row)">
                                    选择
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table> 
            </div>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                      确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-form>
</template>

<script lang="ts" setup>
import { rules } from './useMenuOa'
import type { FormInstance } from 'element-plus'
import { uploadToWechat,getOaReplyList } from '@/api/application/gzh/menu'
import feedback from '@/utils/feedback'
import { usePaging } from '@/hooks/usePaging'
const dialogVisible = ref(false)
const emit = defineEmits([
    'update:name',
    'update:menuType',
    'update:visitType',
    'update:url',
    'update:appId',
    'update:pagePath',
    'update:file_type',
    'update:media_id',
    'update:image_url',
    'update:video_url',
    'update:title',
    'update:description',
    'update:keyword_id',
    'update:keyword_name',
])
const getMatchingType = computed(() => {
    return (val: number) => {
        switch (val) {
            case 1:
                return '全匹配'
            case 2:
                return '模糊匹配'
        }
    }
})

const getContentType = computed(() => {
    return (val: number) => {
        switch (val) {
            case 1:
                return '文本'
        }
    }
})
const route = useRoute()
const formData = ref({
    reply_type: 2,
    wechat_id: route.query.id
})
const openkeyword = () =>{
    getLists()
    dialogVisible.value = true
}
const { pager, getLists } = usePaging({
    fetchFun: getOaReplyList,
    params: {
        reply_type: 2,
        wechat_id: route.query.id
    }
})
const changetype = (type:any) =>{
    console.log(type)
    menuForm.value.media_id = ""
    menuForm.value.image_url = ""
    menuForm.value.video_url = ""
    menuForm.value.keyword_id = ""
    menuForm.value.keyword_name = ""
}
const Handler = (row:any) => {
    menuForm.value.keyword_id = row.id
    menuForm.value.keyword_name = row.name
}
const props = withDefaults(
    defineProps<{
        modular?: string
        name?: string
        menuType?: boolean
        visitType?: string
        url?: string
        appId?: string
        pagePath?: string
        file_type?:string
        media_id?:string
        image_url?:string
        video_url?:string
        title?:string
        description?:string
        keyword_id?:string
        keyword_name?:string
    }>(),
    {
        modular: 'master',
        name: '',
        menuType: false,
        visitType: 'view',
        url: '',
        appId: '',
        pagePath: '',
        file_type:"IMAGE_REPLY",
        media_id:"",
        image_url:"",
        video_url:"",
        title:"",
        description:"",
        keyword_id:"",
        keyword_name:""
    }
)

const menuFormRef = shallowRef<FormInstance>()
// 表单数据
const menuForm = ref({ ...props })

const getmedid = async(file:any,type:any) =>{
    if(file){
        feedback.loading('上传中')
        try {
            const data = await uploadToWechat({file_url:file,type:type,wechat_id:route.query.id})
            menuForm.value.media_id = data.media_id
            feedback.closeLoading()
        } catch (error) {
            feedback.closeLoading()
            feedback.msgError('上传微信失败')
        }
    }else{
        menuForm.value.media_id = ""
    }
    
}
watch(
    () => props,
    (value) => {
        menuForm.value = value
    },
    { immediate: true }
)

watchEffect(() => {
    if (props.modular === 'master') {
        emit('update:menuType', menuForm.value.menuType)
    }
    emit('update:name', menuForm.value.name)
    emit('update:visitType', menuForm.value.visitType)
    emit('update:url', menuForm.value.url)
    emit('update:appId', menuForm.value.appId)
    emit('update:pagePath', menuForm.value.pagePath)
    emit('update:file_type', menuForm.value.file_type)
    emit('update:media_id', menuForm.value.media_id)
    emit('update:video_url', menuForm.value.video_url)
    emit('update:title', menuForm.value.title)
    emit('update:description', menuForm.value.description)
    emit('update:image_url', menuForm.value.image_url)
    emit('update:keyword_id', menuForm.value.keyword_id)
    emit('update:keyword_name', menuForm.value.keyword_name)
})

defineExpose({
    menuFormRef
})
</script>
